<template>
  <div class="containers">
    <div class="container">
      <div class="handle-box">
        <el-button type="primary" icon="el-icon-plus" class="handle-add mr10" @click="addregions" size="small">
          添加秒杀商品
        </el-button>
        <el-select v-model="killing_session_id" @change="getData" placeholder="请选择秒杀场次" size="small" class="mr10">
          <el-option v-for="(item, index) in killlist" :key="item.ID" :label="item.name" :value="item.ID"></el-option>
        </el-select>
        <el-select v-model="class_first_id" @change="setfirst" placeholder="请选择一级分类" size="small" class="mr10">
          <el-option v-for="(item, index) in firstlist" :key="item.ID" :label="item.name" :value="item.ID"></el-option>
        </el-select>
        <el-select v-model="class_second_id" placeholder="请选择二级分类" size="small" class="mr10" @change="setsecond">
          <el-option v-for="(item, index) in secondlist" :key="item.ID" :label="item.name" :value="item.ID"></el-option>
        </el-select>
        <el-select v-model="class_third_id" placeholder="请选择三级分类" size="small" class="mr10" @change="getData">
          <el-option v-for="(item, index) in thirdlist" :key="item.ID" :label="item.name" :value="item.ID"></el-option>
        </el-select>
        <el-input v-model="keyword" placeholder="关键词" class="handle-input mr10" size="small"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="getData" class="mr10" size="small">搜索</el-button>
      </div>
      <el-table :data="tableData" class="table" ref="multipleTable" header-cell-class-name="table-header"
        @selection-change="handleSelectionChange" v-loading="loading">
        <el-table-column prop="name" label="商品名称"></el-table-column>
        <el-table-column prop="title" label="商品简介"></el-table-column>
        <el-table-column prop="money" label="商品价格"></el-table-column>
        <el-table-column prop="stock" label="商品库存"></el-table-column>
        <el-table-column prop="market" label="市场价"></el-table-column>
        <el-table-column label="展示图片" align="center">
          <template slot-scope="scope">
            <el-image class="table-td-thumb" :src="scope.row.img" :preview-src-list="[scope.row.img]"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序">
          <template slot-scope="scope">
            <el-input v-model="scope.row.sort" @blur="shortcutUpdateGoods(scope.row, 'sort')"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="商品上架" align="center">
          <template slot-scope="scope">
            <el-tag :type="scope.row.state==0 ? 'danger' : 'success'" @click="shortcutUpdateGoods(scope.row, 'state')">{{ scope.row.state==0 ? '下架' : '上架' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" @click="addregion(scope.row)">编辑</el-button>
            <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handlePageChange" :current-page="query.pageIndex"
          :page-sizes="[20, 30, 40, 50]" :page-size="query.pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal">
        </el-pagination>
      </div>
    </div>
    <!-- 编辑/添加弹出框 -->
		<el-dialog :title="type?'编辑':'添加'" :visible.sync="editVisible" width="60%">
			<el-form ref="form" :model="form" label-width="70px">
				<el-form-item label="价格"><el-input v-model="form.money"></el-input></el-form-item>
				<el-form-item label="市场价"><el-input v-model="form.market"></el-input></el-form-item>
				<el-form-item label="库存"><el-input v-model="form.stock"></el-input></el-form-item>
				<el-form-item label="场次">
          <el-select v-model="form.killing_session_id" placeholder="请选择三级分类" size="small" class="mr10">
            <el-option v-for="(item, index) in killlist" :key="item.ID" :label="item.name" :value="item.ID"></el-option>
          </el-select>
        </el-form-item>
			</el-form>
      <div v-if="!form.ID">
        <el-input v-model="keywords" placeholder="关键词" class="handle-input mr10" size="small"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="getDatas" class="mr10" size="small">搜索</el-button>
        <el-table :data="tableDatas" class="table" ref="multipleTable" header-cell-class-name="table-header" v-loading="loadings">
        <el-table-column prop="name" label="商品名称"></el-table-column>
        <el-table-column prop="title" label="商品简介"></el-table-column>
        <el-table-column prop="price" label="商品价格"></el-table-column>
        <el-table-column prop="stock" label="商品库存"></el-table-column>
        <el-table-column label="展示图片" align="center">
          <template slot-scope="scope">
            <el-image class="table-td-thumb" :src="scope.row.img" :preview-src-list="[scope.row.img]"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="展示图片" align="center">
          <template slot-scope="scope">
            <el-image class="table-td-thumb" :src="scope.row.img" :preview-src-list="[scope.row.img]"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-radio-group v-model="form.goods_id" size="small" @click="form.goods_id=scope.row.ID">
              <el-radio v-model="radios" :label="scope.row.ID">选择</el-radio>
            </el-radio-group>
            <!-- <el-button type="text" icon="el-icon-edit" @click="form.goods_id=scope.row.ID">选择</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination @size-change="handleSizeChanges" @current-change="handlePageChanges" :current-page="querys.pageIndex"
          :page-sizes="[20, 30, 40, 50]" :page-size="querys.pageSize"  :total="pageTotals" layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
      </div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<el-button type="primary" @click="saveEdit">确 定</el-button>
			</span>
		</el-dialog>
  </div>
</template>

<script>
export default {
  name: 'basetable',
  data() {
    return {
      query: {
        pageIndex: 1,
         pageSize: 20
      },
      querys: {
        pageIndex: 1,
         pageSize: 20
      },
      upimg: {
        token: '',
        key: new Date().valueOf()
      },
      killlist:[],
      code: 0,
      killing_session_id:'',
      upload: '',
      editVisible: false,
      tableData: [],
      tableDatas: [],
      pageTotal: 0,
      pageTotals: 0,
      imageUrl: '',
      videoUrl: '',
      type: 0,
      navlist: [],
      keyword: '',
      keywords: '',
      loading:false,
      loadings:false,
      class_first_id:'',
      class_second_id:'',
      class_third_id:'',
      firstlist:[],
      secondlist:[],
      thirdlist:[],

      radios:'2',
      form:{
        money:'',
        market:'',
        goods_id:'',
        killing_session_id:'',
        stock:''
      }
    };
  },
  created() {
    this.getNAV()
    this.getDatas();
  },
  methods: {
    //修改size值
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.query.pageSize = val
      this.getData();
    },
    //修改size值
    handleSizeChanges(val) {
      console.log(`每页 ${val} 条`);
      this.querys.pageSize = val
      this.getDatas();
    },
    // 修改商品信息
    shortcutUpdateGoods(e, type) {
      if (type == 'is_index') {
        e.is_index = e.is_index ? 0 : 1
      }
      if (type == 'is_hot') {
        e.is_hot = e.is_hot ? 0 : 1
      }
      if (type == 'is_extension') {
        e.is_extension = e.is_extension ? 0 : 1
      }
      if (type == 'state') {
        e.state = e.state ? 0 : 1
      }
      this.request('admin/shortcutUpdateGoods/', 'post', { id: e.ID, is_index: e.is_index, is_hot: e.is_hot, is_extension: e.is_extension, sort: Number(e.sort), state: e.state }).then(res => {
        this.getData()
        if (res.errno == 0) {
          this.$message.success(res.errmsg);
        } else {
          this.$message.error(res.errmsg);
        }
      })
    },

    //商品分区修改
    getoption(e) {
      this.code = e
    },
    //获取商品分区
    getNAV() {
      this.request('admin/partition/', 'get', { page: this.query.pageIndex, size: this.query.pageSize }).then(res => {
        this.navlist = [{ID:0,name:'全部'},...res.data.data]
        // this.code = res.data.data[0].ID

        this.getData()
      })
      this.request('admin/firstClass/', 'get', { page: 1, size: 100, keyword: '' }).then(res => {
        this.firstlist = res.data.data
      })
      this.request('admin/killingSession/', 'get', { page: 1, size: 100}).then(res => {
				this.killlist=res.data.data
			})
    },
    //获取2级分类
    setfirst() {
      this.class_second_id = ''
      this.request('admin/secondClass/', 'get', { class_first_id: this.class_first_id, page: 1, size: 100, keyword: '' }).then(res => {
        this.secondlist = res.data.data
        this.getData()
      })
    },
    //获取3级分类
    setsecond() {
      this.class_third_id = ''
      this.request('admin/thirdClass/', 'get', { class_second_id: this.class_second_id, page: 1, size: 100, keyword: '' }).then(res => {
        this.thirdlist = res.data.data
        this.getData()
      })
    },
    //获取数据
    getData() {
      this.loading=true
      this.request('admin/killing/add_goods/', 'get', { killing_session_id:this.killing_session_id,page: this.query.pageIndex, size: this.query.pageSize, keyword: this.keyword, class_first_id:this.class_first_id,
      class_second_id:this.class_second_id,
      class_third_id:this.class_third_id}).then(res => {
        // console.log(res)
        this.tableData = res.data.data
        this.pageTotal = res.data.total
      })
      this.loading=false
    },
    //获取数据
    getDatas() {
      this.loadings=true
      this.request('admin/add_goods/', 'get', { page: this.querys.pageIndex, size: this.querys.pageSize, keyword: this.keywords, }).then(res => {
        // console.log(res)
        this.tableDatas = res.data.data
        this.pageTotals = res.data.total
      })
      this.loadings=false
    },
    // 编辑
    handleEdit(e) {
      // this.$router.push({ path: '/commodity/addseckill', query: { id: e.ID } });
    },
    cancel() {
      this.editVisible=false
      this.getData();
    },
    // 修改排序
    operations(e, code) {
      e.sort = Number(e.sort)
      this.request('admin/add_news/', 'put', e).then(res => {
        if (res.errno == 0) {
          this.$message.success(res.errmsg);
        } else {
          this.$message.error(res.errmsg);
        }
      });
      this.editVisible = false;
      this.getData();
    },
    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      this.$confirm('确定要删除吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          this.request('admin/killing/add_goods/', 'delete', { ID: row.ID }).then(res => {
            if (res.errno == 0) {
              this.$message.success(res.errmsg);
              this.tableData.splice(index, 1)
              this.getData()
            } else {
              this.$message.error(res.errmsg);
            }
          });
        })
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 添加
    addregion(e) {
      this.editVisible=true
      this.form=e
      this.type=1
    },
    // 添加秒杀商品
    addregions(id) {
      this.type=0
      this.form={
        money:'',
        market:'',
        goods_id:'',
        killing_session_id:'',
        stock:''
      }
      this.editVisible=true
    },
    // 添加
    saveEdit(){
      if(!this.form.money){
        this.$message.error('请填写价格');
        return
      }
      if(!this.form.market){
        this.$message.error('请填写市场价格');
        return
      }
      if(!this.form.goods_id){
        this.$message.error('请填写库存');
        return
      }
      if(!this.form.killing_session_id){
        this.$message.error('请选择秒杀场次');
        return
      }
      if(!this.form.goods_id){
        this.$message.error('请选择商品');
        return
      }
        this.form.money=Number(this.form.money)
        this.form.market=Number(this.form.market)
        this.form.killing_session_id=Number(this.form.killing_session_id)
        this.form.goods_id=Number(this.form.goods_id)
        this.form.stock=Number(this.form.stock)
        this.request('admin/killing/add_goods/', this.type==0?'post':'put', this.form).then(res => {
          if(res.errno==0){
            this.cancel()
            this.$message.success(res.errmsg);
          }else{
            this.$message.error(res.errmsg);
          }
        })

    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, 'pageIndex', val);
      this.getData();
    },
    // 分页导航
    handlePageChanges(val) {
      this.$set(this.querys, 'pageIndex', val);
      this.getDatas();
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.el-upload--text {
  width: 200px !important;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;

  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  /* width: 100px; */
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100%;
  height: 178px;
  display: block;
}

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 60px;
  height: 60px;

  .el-image img {
    object-fit: cover;
  }
}

/* 设置分页按钮样式 */
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
